<template>
  <q-pull-to-refresh ref="pullFresh" class="content-padding" :handler="refresher">
    <!-- 项目层级面包屑 -->
    <breadcrumbs></breadcrumbs>
    <!-- 面板选项 -->
    <q-tabs v-model="panelBox" animated swipeable inverted color="secondary" align="justify">
      <q-tab name="statics" slot="title" :label="$t('统计汇总')" />
      <q-tab name="works" slot="title" :label="$t('工作考核')" />
      <!-- list panel -->
      <q-tab-pane name="statics">
        {{ $t('报警统计') }}
        <bar-chart :chartData="statics_chart1" :height="chartHeight"></bar-chart>
        {{ $t('未及时测量点数统计') }}
        <bar-chart :chartData="statics_chart2" :height="chartHeight"></bar-chart>
        {{ $t('上传数据量统计') }}
        <bar-chart :chartData="statics_chart3" :height="chartHeight"></bar-chart>
      </q-tab-pane>
      <q-tab-pane name="works">
        {{ $t('未及时测量点数统计') }}
        <bar-chart :chartData="works_chart1" :height="chartHeight"></bar-chart>
        {{ $t('未及时上传点次') }}
        <bar-chart :chartData="works_chart2" :height="chartHeight"></bar-chart>
        {{ $t('未及时处置报警数') }}
        <bar-chart :chartData="works_chart3" :height="chartHeight"></bar-chart>
      </q-tab-pane>
    </q-tabs>
  </q-pull-to-refresh>
</template>

<script>
import baseMixins from 'pages/mixins/index.js';
export default {
  mixins: [baseMixins],
  data() {
    return {
      chartHeight: '180px',
      panelBox: 'statics',
      // typeData、valueData
      statics_chart1: {},
      statics_chart2: {},
      statics_chart3: {},
      works_chart1: {},
      works_chart2: {},
      works_chart3: {},
    };
  },
  methods: {
    init() {
      // this.staticsPanel().then(result => {
      //   console.log(result);
      // });
      this.worksPanel();
      this.$nextTick(() => {
        this.$refs.pullFresh.trigger();
      });
    },
    refresher(done) {
      this.staticsPanel().finally(() => {
        done();
      });
    },
    staticsPanel() {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel,
      }
      return Promise.all([
        this.$axios.getAlarmStatistics(pars).then(result => {
          let data = result.data || [];
          let chartOptionData = {
            typeData: [],
            valueData: [
              {
                name: this.$t('总报警数'),
                color: "#D63131",
                data: []
              },
              {
                name: this.$t('已处置报警数'),
                color: "#00CCFF",
                data: []
              },
              {
                name: this.$t('已关闭报警'),
                color: "#00CC00",
                data: []
              }
            ]
          };
          data.forEach(item => {
            chartOptionData.typeData.push(item.name);
            chartOptionData.valueData[0].data.push(item.total);
            chartOptionData.valueData[1].data.push(item.handled);
            chartOptionData.valueData[2].data.push(item.closed);
          });
          //
          this.statics_chart1 = chartOptionData;
        }),
        this.$axios.getMeasPointTimeliness(pars).then(result => {
          let data = result.data || [];
          let chartOptionData = {
            typeData: [],
            valueData: [
              {
                name: this.$t('未及时测量点数'),
                color: '#FF9900',
                data: []
              }
            ]
          };
          data.forEach(item => {
            chartOptionData.typeData.push(item.name);
            chartOptionData.valueData[0].data.push(item.amount);
          });
          // 图表
          this.statics_chart2 = chartOptionData;
        }),
        this.$axios.getDayUploadStatistics(pars).then(result => {
          let data = result.data || [];
          let chartOptionData = {
            typeData: [],
            valueData: [
              {
                name: this.$t('当日上传量'),
                color: '#33CC00',
                data: []
              }
            ]
          };
          data.forEach(item => {
            chartOptionData.typeData.push(item.name);
            chartOptionData.valueData[0].data.push(item.total);
          });
          // 图表
          this.statics_chart3 = chartOptionData;
        })
      ]);
    },
    worksPanel() {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel,
      }
      return this.$axios.getStatisticsWorkAssessment(pars).then(result => {
        let data = result.data || [];
        let names = [], handles = [], points = [], uploads = [];
        for(var key in data){
          names.push(data[key].name);
          handles.push(data[key].handle || 0);
          points.push(data[key].point || 0);
          uploads.push(data[key].upload || 0);
        }
        //
        this.works_chart1 = {
          typeData: names,
          valueData: [
            {
              name: this.$t('未及时测量点数统计'),
              // color: '#33CC00',
              data: points
            }
          ]
        };
        this.works_chart2 = {
          typeData: names,
          valueData: [
            {
              name: this.$t('未及时上传点次'),
              // color: '#33CC00',
              data: uploads
            }
          ]
        };
        this.works_chart3 = {
          typeData: names,
          valueData: [
            {
              name: this.$t('未及时处置报警数'),
              // color: '#33CC00',
              data: handles
            }
          ]
        };
      });
    }
  }
}
</script>

<style lang="less" scoped>
.q-tabs{
  .q-tab-pane{
    border: 0;
  }
}
</style>

